<template>
  <f7-page>
    <qm-currentcy-navbar title="工作">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <div>
      <qm-block title="智能内外勤" class="qm-blo" :needpadding="false">
        <div class="qm-entry">
          <qm-entry
            v-for="(item, index) in data1"
            :key="index"
            :data="item"
            iconWidth="88"
            fontSize="24"
          ></qm-entry>
        </div>
      </qm-block>
      <qm-block title="高效工作" class="qm-blo" :needpadding="false">
        <div class="qm-entry">
          <qm-entry
            v-for="(item, index) in data2"
            :key="index"
            :data="item"
            iconWidth="88"
            fontSize="24"
          ></qm-entry>
        </div>
      </qm-block>
      <qm-block title="管理工作" class="qm-blo" :needpadding="false">
        <div class="qm-entry">
          <qm-entry
            v-for="(item, index) in data3"
            :key="index"
            :data="item"
            iconWidth="88"
            fontSize="24"
          ></qm-entry>
        </div>
      </qm-block>
      <qm-block title="人事行政" class="qm-blo" :needpadding="false">
        <div class="qm-entry">
          <qm-entry
            v-for="(item, index) in data4"
            :key="index"
            :data="item"
            iconWidth="88"
            fontSize="24"
          ></qm-entry>
        </div>
      </qm-block>
      <qm-block title="测试" :needpadding="false">
        <div class="qm-entry">
          <qm-entry
            v-for="(item, index) in data5"
            :key="index"
            :data="item"
            iconWidth="88"
            fontSize="24"
          ></qm-entry>
        </div>
      </qm-block>
    </div>
    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      data1: [
        {
          image: "static/img/function-entrance/index1/icon-work-kaoqin.svg",
          title: "考勤打卡",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-qiandao.svg",
          title: "外出签到",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-qingjia.svg",
          title: "请假",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-waichu.svg",
          title: "外出",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-chuchai.svg",
          title: "出差",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-jiaban.svg",
          title: "加班",
        },
      ],
      data2: [
        {
          image: "static/img/function-entrance/index1/icon-work-rizhi.svg",
          title: "工作日志",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-jihua.svg",
          title: "工作计划",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-richeng.svg",
          title: "我的日程",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-peixun.svg",
          title: "培训报名",
        },
      ],
      data3: [
        {
          image: "static/img/function-entrance/index1/icon-work-daipi.svg",
          title: "待我审批",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-shenpi.svg",
          title: "我审批的",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-chaosong.svg",
          title: "抄送给我",
        },
      ],
      data4: [
        {
          image: "static/img/function-entrance/index1/icon-work-shenling.svg",
          title: "物品申领",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-yongzhang.svg",
          title: "用章申请",
        },
        {
          image: "static/img/function-entrance/index1/icon-work-caigou.svg",
          title: "采购申请",
        },
        {
          image:
            "static/img/function-entrance/index1/icon-work-zhuanzheng.svg",
          title: "转正申请",
        },
      ],
      data5: [
        {
          href: "/ui/send-verification-code/index",
          image: "static/img/function-entrance/index1/icon-work-kaoqin.svg",
          title: "个人1",
        },
        {
          href: "/ui/notice/index5",
          image: "static/img/function-entrance/index1/icon-work-kaoqin.svg",
          title: "通知5",
        },
        {
          href: "/ui/list/index",
          image: "static/img/function-entrance/index1/icon-work-kaoqin.svg",
          title: "列表页首页",
        },
        {
          href: "/ui/list/itemDetail",
          image: "static/img/function-entrance/index1/icon-work-qiandao.svg",
          title: "列表页详情",
        },
        {
          href: "/ui/list/subscribeList",
          image: "static/img/function-entrance/index1/icon-work-qingjia.svg",
          title: "会议室预约",
        },
        {
          href: "/ui/list/courseList",
          image: "static/img/function-entrance/index1/icon-work-waichu.svg",
          title: "课程列表",
        },
        {
          href: "/ui/list/agencyMatters",
          image: "static/img/function-entrance/index1/icon-work-chuchai.svg",
          title: "代办事项",
        },
        {
          href: "/ui/list/entrustList",
          image: "static/img/function-entrance/index1/icon-work-jiaban.svg",
          title: "代办事项-委托函",
        },
        {
          href: "/ui/list/productStatusList",
          image: "static/img/function-entrance/index1/icon-work-rizhi.svg",
          title: "代办事项-产品状态",
        },
        {
          href: "/ui/list/agencyList",
          image: "static/img/function-entrance/index1/icon-work-jihua.svg",
          title: "审批系统",
        },
        {
          href: "/ui/list/projectList",
          image: "static/img/function-entrance/index1/icon-work-richeng.svg",
          title: "项目列表",
        },
        {
          href: "/ui/list/itemQuery",
          image: "static/img/function-entrance/index1/icon-work-peixun.svg",
          title: "项目查询",
        },
        {
          href: "/ui/blank-page/black/pageLoadFailed",
          image: "static/img/function-entrance/index1/icon-work-daipi.svg",
          title: "空白页面",
        },
        {
          href: "/ui/blank-page/pageSuccessWithButton",
          image: "static/img/function-entrance/index1/icon-work-shenpi.svg",
          title: "操作成功提示",
        },
        {
          href: "/ui/blank-page/pageLoading",
          image: "static/img/function-entrance/index1/icon-work-chaosong.svg",
          title: "加载页面",
        },
        {
          href: "/ui/function-entrance/index2",
          image: "static/img/function-entrance/index1/icon-work-shenling.svg",
          title: "功能入口2",
        },
        {
          href: "/ui/function-entrance/index3",
          image: "static/img/function-entrance/index1/icon-work-yongzhang.svg",
          title: "物业管理",
        },
        {
          href: "/ui/function-entrance/index4",
          image: "static/img/function-entrance/index1/icon-work-yongzhang.svg",
          title: "欢迎界面",
        },
        {
          href: "/ui/log-on/index",
          image: "static/img/function-entrance/index1/icon-work-yongzhang.svg",
          title: "登录界面",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
  .qm-block {
    padding: calc(16px * var(--ratio)) 0 0 0;
    .qm-block-title {
      // margin-left: calc(32px * var(--ratio));
      font-size: var(--font-size-subtitle);
      font-weight: normal;
    }
    .qm-block-content {
      margin-top: calc(16px * var(--ratio));
    }
  }
}

/deep/.qm-entry {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-row-gap: calc(24px * var(--ratio));
  .entry .entry-title {
    margin-top: calc(8px * var(--ratio));
  }
}

.qm-blo::after {
  content: "";
  width: 92%;
  height: calc(24px * var(--ratio));
  display: block;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-divider-background);
}
</style>
